<template>
  <div class="role-display-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>角色管理中心</h1>
      <p class="page-description">集中管理系统角色、权限分配和访问控制策略</p>
    </div>

    <!-- 统计概览卡片 -->
    <div class="stats-container">
      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ totalRoles }}</div>
          <div class="stat-label">总角色数</div>
          <div class="stat-trend">
            <span class="trend-up"><el-icon>
                <ArrowUp />
              </el-icon> 3</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ activeRoles }}</div>
          <div class="stat-label">活跃角色</div>
          <div class="stat-trend">
            <span class="trend-stable"><el-icon>
                <Minus />
              </el-icon> 0</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ totalPermissions }}</div>
          <div class="stat-label">权限总数</div>
          <div class="stat-trend">
            <span class="trend-up"><el-icon>
                <ArrowUp />
              </el-icon> 2</span>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-value">{{ roleUsageRate }}%</div>
          <div class="stat-label">角色使用率</div>
          <div class="stat-trend">
            <span class="trend-up"><el-icon>
                <ArrowUp />
              </el-icon> 5.2%</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 功能导航区域 -->
    <div class="features-container">
      <el-card class="feature-card" @click="navigateTo('list')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <UserFilled />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>角色列表管理</h3>
          <p>查看、创建、编辑和删除系统角色</p>
        </div>

      </el-card>

      <el-card class="feature-card" @click="navigateTo('permission-settings')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <Lock />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>权限配置管理</h3>
          <p>管理系统权限项，配置权限分组和权限描述</p>
        </div>

      </el-card>

      <el-card class="feature-card" @click="navigateTo('logs')">
        <div class="feature-icon"><el-icon style="font-size: 28px;">
            <DocumentChecked />
          </el-icon>
          <div class="feature-action"><el-icon>
              <ArrowRight />
            </el-icon></div>
        </div>
        <div class="feature-content">
          <h3>角色审计日志</h3>
          <p>查看角色创建、修改和删除的历史记录</p>
        </div>

      </el-card>
    </div>

    <!-- 角色分布和最近活动 -->
    <!-- <div class="role-details-container">
      <el-card class="role-chart-card">
        <div class="card-header">
          <h2>角色分布</h2>
        </div>
        <div class="chart-container">
          <el-progress 
            v-for="item in roleDistribution" 
            :key="item.role" 
            :percentage="item.percentage" 
            :status="item.status"
            :text-inside="true"
            :stroke-width="16"
            class="role-progress"
          >
            {{ item.role }}
          </el-progress>
        </div>
      </el-card>

      <el-card class="recent-activity-card">
        <div class="card-header">
          <h2>最近角色操作</h2>
          <el-button link>查看全部</el-button>
        </div>
        <el-table :data="recentActivities" stripe class="activity-table">
          <el-table-column prop="operator" label="操作人" width="160" />
          <el-table-column prop="action" label="操作" width="200" />
          <el-table-column prop="role" label="角色" width="140" />
          <el-table-column prop="time" label="时间" width="180" />
        </el-table>
      </el-card>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { UserFilled, Lock, DocumentChecked, ArrowUp, Minus, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();

// 统计数据
const totalRoles = ref('12');
const activeRoles = ref('10');
const totalPermissions = ref('24');
const roleUsageRate = ref('85');

// 导航到具体功能页面
function navigateTo(path) {
  router.push(`/roles/${path}`);
}
</script>

<style scoped>
@import url('../styles/rolemanage.css');
</style>